<!--
 * @Description: 待做补料、大货状态强弹弹框
 * @FilePath: /glm-mes-pc/src/views/Dialog/bulkReplenDialog.vue
-->
<template>
	<el-dialog v-model="isVisible" width="550" append-to-body :show-close="false" :close-on-click-modal="false" class="comm-dialog dataChange-container">
		<template #header>
			<span class="title">{{ dialogTitle }}</span>
		</template>
		<div class="dialog-conten">
			<div class="change-content">
				<svg-icon icon-class="error2" class="error-icon" />
				<span class="change-content-text">{{ msgList.length > 0 && msgList[ind].content }}</span>
			</div>
		</div>
		<div class="bottom-btn">
			<el-button v-if="ind !== 0" @click="ind--" type="primary">上一条</el-button>
			<el-button v-if="ind == msgList.length - 1" @click="confirmNotice" type="primary" style="margin-left: 10px">确认</el-button>
			<el-button v-if="ind < msgList.length - 1" @click="ind++" type="primary">下一条</el-button>
		</div>
	</el-dialog>
</template>

<script setup>
const { proxy } = getCurrentInstance()
import { updateStatusCommon } from '@/api/system/notice'
const emit = defineEmits(['update:isShow'])
const props = defineProps({
	isShow: {
		type: Boolean,
		required: true
	}
})
const isVisible = computed({
	get() {
		return props.isShow
	},
	set() {
		emit('update:isShow', false)
	}
})
const msgList = ref([])
const ind = ref(0)
const dialogTitle = ref('')
// 获取弹框内容
proxy.EventBus.on('bulkReplen_event', (res) => {
	msgList.value.push(res)
	dialogTitle.value = msgList.value[0].noticeType == 9 ? '待做补料通知' : msgList.value[0].noticeType == 10 ? '大货状态通知' : ''
})

onUnmounted(() => {
	proxy.EventBus.off('bulkReplen_event')
})

// 确认
const confirmNotice = async () => {
	emit('update:isShow', false)
	let idList = []
	msgList.value.map((item) => {
		idList.push(item.messageId)
	})
	await updateStatusCommon({ idList: idList })
}
</script>

<style lang="scss" scoped>
.dataChange-container {
	position: relative;
	.dialog-conten {
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
	}
	.change-content {
		font-size: 12px;
		color: #061326;
		display: flex;
		align-items: center;
		.error-icon {
			font-size: 20px;
			margin-right: 10px;
		}
		.change-content-text {
			max-width: 460px;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: nowrap;
		}
	}
	// 底部按钮
	.bottom-btn {
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
